// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form, notification } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import StockModal from './StockModal.js';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ fourfunds, loading }) => ({
  fourfunds,
  loading: loading.models.fourfundsRule,
}))
@Form.create()
class StockHistory extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
  };

  dataSourcechange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'fourfunds/GetStockHistory',
      payload: {},
      callback: res => {
        that.setState({
          dataSource: {
            title: '四号基金历史股票交易 ',
            code: 1,
            data: res.data,
            total: ['stockcount', 'profit', 'initvalue', 'sellvalue'],
            // paging:true,
            columns: [
              {
                title: '股票代码',
                dataIndex: 'stock',
                width: 110,
                type: 'string',
                sorter: true,
                search: true,
              },
              {
                title: '买卖方向',
                dataIndex: 'type',
                type: 'number',
                width: 60,
                filters: [
                  {
                    text: '多头',
                    value: '1',
                  },
                  {
                    text: '空头',
                    value: '0',
                  },
                ],
                render: (value, row, index) => {
                  return <span>{value === 1 ? '多头' : value === 0 ? '空头' : ''}</span>;
                },
              },
              {
                title: '成本价',
                width: 75,
                dataIndex: 'costprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '平仓价',
                width: 75,
                dataIndex: 'sellprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '盈亏幅度',
                dataIndex: 'profitpercent',
                width: 90,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return (
                    <span>
                      {typeof value === 'number' || typeof value === 'string'
                        ? `${NumberDivide(
                            mathService
                              .mul(value, 75)
                              .toFixed(2)
                              .toString()
                          )}%`
                        : null}
                    </span>
                  );
                },
              },
              {
                title: '盈亏金额',
                dataIndex: 'profit',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '初始金额',
                dataIndex: 'initvalue',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '初始金额',
                dataIndex: 'sellvalue',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '股数',
                dataIndex: 'stockcount',
                width: 75,
                type: 'number',
                sorter: true,
              },
              {
                title: '平仓时间',
                dataIndex: 'date',
                width: 100,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '开仓时间',
                dataIndex: 'opendate',
                width: 100,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
            ],
          },
        });
      },
    });
  }

  openVisible() {
    this.setState({
      Visible: true,
    });
  }

  closeVisbile() {
    const that = this;
    this.setState(
      {
        Visible: false,
      },
      () => {
        that.dataSourcechange();
      }
    );
  }

  insert() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fourfunds/GetStockHistory',
            callback: res => {
              that.dataSourcechange();
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否开始生成',
      btn,
      key,
      onClose: close,
    });
  }

  clear() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fourfunds/Clear',
            callback: res => {
              that.dataSourcechange();
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否清空',
      btn,
      key,
      onClose: close,
    });
  }

  handleSave(row, values) {
    const that = this;
    const { dispatch } = that.props;
    dispatch({
      type: 'fourfunds/UpdateStockUpdateInfo',
      payload: { ...row, ...values },
      callback: res => {
        that.dataSourcechange();
      },
    });
  }

  render() {
    const { Visible } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          {/* <Button type={'primary'} onClick={this.insert.bind(this)} style={{marginBottom:5,marginRight:25}} ghost>直接生成今日信息</Button>
          <Button type="danger" onClick={this.clear.bind(this)} style={{marginBottom:5,marginRight:25}} ghost>清空生成信息</Button>
          <Button  onClick={this.openVisible.bind(this)} style={{marginBottom:5,marginRight:25}}>输入调仓信息</Button>
          <br/>
          <br/> */}
          <StandardTablePro
            dataSource={this.state.dataSource}
            handleSave={this.handleSave.bind(this)}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourcechange();
  }

  componentWillUnmount() {}
}

export default StockHistory;
